import 'package:flutter/material.dart';

main() =>
    runApp(MaterialApp(debugShowCheckedModeBanner: false, home: HomePage()));
var blueColor = Color(0xFF090e42);
var pinkColor = Color(0xFFff6b80);
var flume = 'https://i1.bvimg.com/688304/80bdb1c8b285f414.jpg';
var martinGarrix = 'https://i1.bvimg.com/688304/817cbeef6cfdffbe.jpg';
var rosieLowe = 'http://i1.bvimg.com/688304/a4ba3f7a1d40a7e8.jpg';

class HomePage extends StatefulWidget {
  @override
  createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  build(context) => Scaffold(
        backgroundColor: blueColor,
        body: Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          child: ListView(
            physics: BouncingScrollPhysics(),
            children: [
              SizedBox(height: 32.0),
              CustomTextField(),
              SizedBox(height: 32.0),
              Text(
                '分类',
                style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 38.0),
              ),
              SizedBox(height: 16.0),
              Row(
                children: [
                  ItemCard('https://i1.bvimg.com/688304/ab146c4d07cc4210.jpg',
                      '交响乐'),
                  SizedBox(
                    width: 16.0,
                  ),
                  ItemCard('https://i1.bvimg.com/688304/4b6553a5b29cca06.jpg',
                      '平静 & 放松'),
                ],
              ),
              SizedBox(height: 32.0),
              Row(
                children: [
                  ItemCard(
                      'https://i2.bvimg.com/688304/90f421b955657c86.jpg', '浪漫'),
                  SizedBox(
                    width: 16.0,
                  ),
                  ItemCard(
                      'https://i2.bvimg.com/688304/7686c01f1e29ddda.jpg', '老年'),
                ],
              ),
              SizedBox(height: 32.0),
              Text(
                '推荐',
                style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 38.0),
              ),
              SizedBox(
                height: 16.0,
              ),
              SongItem('以爱之名', '马丁·盖瑞斯', martinGarrix),
              SongItem('从不像你', '弗卢梅', flume),
              SongItem('我们担心', '罗西劳', rosieLowe),
              SongItem('以爱之名', '马丁·盖瑞斯', martinGarrix),
              SongItem('以爱之名', '马丁·盖瑞斯', martinGarrix),
            ],
          ),
        ),
      );
}

class SongItem extends StatelessWidget {
  SongItem(this.title, this.artist, this.image);
  final title;
  final artist;
  final image;
  @override
  build(context) => GestureDetector(
        onTap: () {
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => DetailedScreen(title, artist, image)));
        },
        child: Padding(
          padding: EdgeInsets.only(bottom: 26.0),
          child: Row(
            children: [
              Stack(
                children: [
                  Container(
                    height: 80.0,
                    width: 80.0,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(8.0),
                      child: Image.network(
                        image,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  Container(
                      height: 80.0,
                      width: 80.0,
                      child: Icon(
                        Icons.play_circle_filled,
                        color: Colors.white.withOpacity(0.7),
                        size: 42.0,
                      ))
                ],
              ),
              SizedBox(width: 16.0),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                        fontSize: 24.0),
                  ),
                  SizedBox(height: 8.0),
                  Text(
                    artist,
                    style: TextStyle(
                        color: Colors.white.withOpacity(0.5), fontSize: 18.0),
                  ),
                ],
              ),
              Spacer(),
              Icon(
                Icons.more_horiz,
                color: Colors.white.withOpacity(0.6),
                size: 32.0,
              )
            ],
          ),
        ),
      );
}

class ItemCard extends StatelessWidget {
  ItemCard(this.image, this.title);
  final image;
  final title;
  @override
  build(context) => Expanded(
        flex: 1,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              height: 120.0,
              child: Stack(
                children: [
                  ClipRRect(
                      borderRadius: BorderRadius.circular(8.0),
                      child: Image.network(
                        image,
                        fit: BoxFit.cover,
                        height: 140.0,
                        width: double.infinity,
                      )),
                  Positioned(
                    right: 16.0,
                    top: 16.0,
                    child: Icon(
                      Icons.bookmark,
                      color: Colors.white.withOpacity(0.6),
                      size: 24.0,
                    ),
                  )
                ],
              ),
            ),
            SizedBox(
              height: 12.0,
            ),
            Padding(
              padding: EdgeInsets.only(left: 4.0),
              child: Text(
                title,
                style: TextStyle(color: Colors.white, fontSize: 20.0),
              ),
            )
          ],
        ),
      );
}

class CustomTextField extends StatelessWidget {
  @override
  build(context) => Container(
        color: Colors.grey.withOpacity(0.16),
        child: Row(
          children: [
            SizedBox(
              width: 8.0,
            ),
            Icon(
              Icons.search,
              color: Colors.white,
            ),
            SizedBox(
              width: 8.0,
            ),
            Expanded(
              child: TextField(
                decoration: InputDecoration(
                    hintText: '搜寻音乐...',
                    hintStyle: TextStyle(color: Colors.grey),
                    border: InputBorder.none),
              ),
            ),
            SizedBox(
              width: 8.0,
            ),
            Icon(
              Icons.mic,
              color: Colors.white,
            ),
            SizedBox(
              width: 8.0,
            ),
          ],
        ),
      );
}

class DetailedScreen extends StatelessWidget {
  final title;
  final artist;
  final image;
  DetailedScreen(this.title, this.artist, this.image);
  @override
  build(context) => Scaffold(
        backgroundColor: blueColor,
        body: Column(
          children: [
            Container(
              height: 500.0,
              child: Stack(
                children: [
                  Container(
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            image: NetworkImage(image), fit: BoxFit.cover)),
                  ),
                  Container(
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                          colors: [blueColor.withOpacity(0.4), blueColor],
                          begin: Alignment.topCenter,
                          end: Alignment.bottomCenter),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.symmetric(horizontal: 12.0),
                    child: Column(
                      children: [
                        SizedBox(height: 52.0),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            GestureDetector(
                              onTap: () => Navigator.of(context).pop(),
                              child: Container(
                                decoration: BoxDecoration(
                                    color: Colors.white.withOpacity(0.1),
                                    borderRadius: BorderRadius.circular(50.0)),
                                child: Icon(
                                  Icons.arrow_drop_down,
                                  color: Colors.white,
                                ),
                              ),
                            ),
                            Column(
                              children: [
                                Text(
                                  '播放列表',
                                  style: TextStyle(
                                      color: Colors.white.withOpacity(0.6)),
                                ),
                                Text('本周人气最佳',
                                    style: TextStyle(color: Colors.white)),
                              ],
                            ),
                            Icon(
                              Icons.playlist_add,
                              color: Colors.white,
                            )
                          ],
                        ),
                        Spacer(),
                        Text(title,
                            style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                                fontSize: 32.0)),
                        SizedBox(
                          height: 6.0,
                        ),
                        Text(
                          artist,
                          style: TextStyle(
                              color: Colors.white.withOpacity(0.6),
                              fontSize: 18.0),
                        ),
                        SizedBox(height: 16.0),
                      ],
                    ),
                  )
                ],
              ),
            ),
            SizedBox(height: 42.0),
            Slider(
              onChanged: (double value) {},
              value: 0.2,
              activeColor: pinkColor,
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    '2:10',
                    style: TextStyle(color: Colors.white.withOpacity(0.7)),
                  ),
                  Text('-03:56',
                      style: TextStyle(color: Colors.white.withOpacity(0.7)))
                ],
              ),
            ),
            Spacer(),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(
                  Icons.fast_rewind,
                  color: Colors.white54,
                  size: 42.0,
                ),
                SizedBox(width: 32.0),
                Container(
                    decoration: BoxDecoration(
                        color: pinkColor,
                        borderRadius: BorderRadius.circular(50.0)),
                    child: Padding(
                      padding: EdgeInsets.all(8.0),
                      child: Icon(
                        Icons.play_arrow,
                        size: 58.0,
                        color: Colors.white,
                      ),
                    )),
                SizedBox(width: 32.0),
                Icon(
                  Icons.fast_forward,
                  color: Colors.white54,
                  size: 42.0,
                )
              ],
            ),
            Spacer(),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Icon(
                  Icons.bookmark_border,
                  color: pinkColor,
                ),
                Icon(
                  Icons.shuffle,
                  color: pinkColor,
                ),
                Icon(
                  Icons.repeat,
                  color: pinkColor,
                ),
              ],
            ),
            SizedBox(height: 58.0),
          ],
        ),
      );
}
